import React from 'react';
import {Card, List, Typography, Tag, Avatar} from 'antd';
import {ShoppingCartOutlined} from '@ant-design/icons';
import styled from 'styled-components';
import {API} from "@/services/typings";
import {OrderOptions, OrderStatus} from "@/constants/OrderStatus";

const {Text} = Typography;

const StyledCard = styled(Card)`
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .ant-card-body {
    padding: 20px;
  }
`;

interface LatestOrdersProps {
  orders: API.IOrderInfo[];
}

const LatestOrders: React.FC<LatestOrdersProps> = ({orders}) => {

  const getStatusTag=(status: string)=>{
    const currentStatus = OrderOptions[status as keyof typeof OrderOptions]
      || OrderOptions[OrderStatus.NEW_ORDER.value];
    return <Tag color={currentStatus.color}>{currentStatus.text}</Tag>;
  }

  return (
    <StyledCard title="最新订单状态" style={{marginTop: '24px'}}>
      <List
        dataSource={orders}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              avatar={
                <Avatar icon={<ShoppingCartOutlined/>} style={{background: '#1890ff'}}/>
              }
              title={`订单 #${item.id}`}
              description={
                <div>
                  <Text type="secondary">{item.customerName || '未知客户'}</Text>-
                  <Text type="secondary">{item.title}</Text>
                </div>
              }
            />
            <div style={{textAlign: 'right'}}>
              {
                getStatusTag(item.orderStatus)
              }
              <div style={{marginTop: 4}}>
                <Text type="secondary">{item.orderTime}</Text>
              </div>
            </div>
          </List.Item>
        )}
      />
    </StyledCard>
  );
};

export default LatestOrders;
